import { ProTable } from '@ant-design/pro-components';
import { Button, Tabs, Modal, Radio, RadioChangeEvent, Space, Tag, Table } from 'antd';
import React, { useState } from 'react';
import "./index.css"
import Papa from 'papaparse';
export type TableListItem1 = {
  key: number;
  code: string;
  chabu: string;
  name: string;
  uploader: string;
  description: string;
  createdAt: number;
};
const tableListDataSource1: TableListItem1[] = [
  {
    key: 1,
    code: 'MT00001',
    chabu: 'string',
    name: '胃癌临床数据',
    uploader: 'admin',
    description: '胃癌临床数据',
    createdAt: 1712122209000,
  },
  {
    key: 2,
    code: 'MT00002',
    chabu: 'string',
    name: '胃癌体检数据',
    uploader: 'admin',
    description: '胃癌体检数据',
    createdAt: 1712122209000,
  },
  {
    key: 3,
    code: 'MT00003',
    chabu: 'string',
    name: '胃癌CT数据',
    uploader: 'admin',
    description: '胃癌CT数据',
    createdAt: 1712122209000,
  },
  {
    key: 4,
    code: 'MT00004',
    chabu: 'string',
    name: '胃癌血检数据',
    uploader: 'admin',
    description: '胃癌血检数据',
    createdAt: 1712122209000,
  },
];

export type TableListItem2 = {
  key: number;
  name: string;
  createdAt: number;
};
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const tableListDataSource2: TableListItem2[] = [
  {
    key: 1,
    name: 'GAIN',
    createdAt: 1712122209000,
  },
  {
    key: 2,
    name: 'C-GAIN',
    createdAt: 1712122209000,
  },
  {
    key: 3,
    name: 'DDC-GAIN',
    createdAt: 1712122209000,
  },
  {
    key: 4,
    name: 'CD-GAIN',
    createdAt: 1712122209000,
  },
  {
    key: 5,
    name: 'MICE',
    createdAt: 1712122209000,
  },
];
const columns: ({ dataIndex: string; title: string; render: (text) => JSX.Element; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string } | { dataIndex: string; title: string; key: string })[] = [
  {
    title: 'f1',
    dataIndex: 'f1',
    key: 'f1',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
}
  },
  {
    title: 'f2',
    dataIndex: 'f2',
    key: 'f2',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f3',
    dataIndex: 'f3',
    key: 'f3',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f4',
    dataIndex: 'f4',
    key: 'f4',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f5',
    dataIndex: 'f5',
    key: 'f5',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f6',
    dataIndex: 'f6',
    key: 'f6',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f7',
    dataIndex: 'f7',
    key: 'f7',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f8',
    dataIndex: 'f8',
    key: 'f8',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f9',
    dataIndex: 'f9',
    key: 'f9',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f10',
    dataIndex: 'f10',
    key: 'f10',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f11',
    dataIndex: 'f11',
    key: 'f11',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f12',
    dataIndex: 'f12',
    key: 'f12',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f13',
    dataIndex: 'f13',
    key: 'f13',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f14',
    dataIndex: 'f14',
    key: 'f14',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f15',
    dataIndex: 'f15',
    key: 'f15',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f16',
    dataIndex: 'f16',
    key: 'f16',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f17',
    dataIndex: 'f17',
    key: 'f17',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>

      )
    }
  },
  {
    title: 'f18',
    dataIndex: 'f18',
    key: 'f18',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f19',
    dataIndex: 'f19',
    key: 'f19',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f20',
    dataIndex: 'f20',
    key: 'f20',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f21',
    dataIndex: 'f21',
    key: 'f21',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f22',
    dataIndex: 'f22',
    key: 'f22',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f23',
    dataIndex: 'f23',
    key: 'f23',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f24',
    dataIndex: 'f24',
    key: 'f24',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f25',
    dataIndex: 'f25',
    key: 'f25',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f26',
    dataIndex: 'f26',
    key: 'f26',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f27',
    dataIndex: 'f27',
    key: 'f27',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f28',
    dataIndex: 'f28',
    key: 'f28',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f29',
    dataIndex: 'f29',
    key: 'f29',
    render:(text) => {
      return (
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'f30',
    dataIndex: 'f30',
    key: 'f30',
    render:(text) => {
      return (
        // <div style={{color:(text === 'nan'  || text.split('.')[0].length + text.split('.')[1].length === 10) && 'red' || '#000'}}>{text}</div>
        <div style={{color: (text === 'nan' || (text.includes('.') && (text.split('.')[0].length + text.split('.')[1].length >= 8))) && 'red' || '#000'}}>{text}</div>
      )
    }
  },
  {
    title: 'target',
    dataIndex: 'target',
    key: 'target',
    render:(text) => {
      return (
        <div style={{color: text === 'nan' && 'red' || '#000'}}>{text}</div>
      )
    }
  },
];

let data = [];
let SVDData=[]
export default () => {
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('Content of the modal1');
  const [value, setValue] = useState(1);
  const showModal = () => {
    setOpen(true);
  };
  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  const handleOk = () => {

    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 2000);

    //? 展示数据 ACC-GAIN
    if (value === 4) {
      const handleNormalFile = async (event) => {
        const response = await fetch('http://localhost:3000/file');
        if (!response.ok) {
          throw new Error('Failed to fetch file');
        }
        const content = await response.text(); // 假设返回的是文本内容
        Papa.parse(content, {
          header: true,
          complete: (results) => {
            console.log('Parsed CSV:', results.data);
            data = results.data
            console.log('data',data);
          },
        });
      }
      const handleACCFile = async (event) => {
        const response = await fetch('http://localhost:3000/fileSVD');
        if (!response.ok) {
          throw new Error('Failed to fetch file');
        }
        const content = await response.text(); // 假设返回的是文本内容
        Papa.parse(content, {
          header: true,
          complete: (results) => {
            console.log('Parsed CSV:', results.data);
            SVDData = results.data
            console.log('data',SVDData);
          },
        });
      }
      handleNormalFile()
      handleACCFile()
    }
    //? MICE
    if (value === 5) {
      const handleNormalFile = async (event) => {
        const response = await fetch('http://localhost:3000/file');
        if (!response.ok) {
          throw new Error('Failed to fetch file');
        }
        const content = await response.text(); // 假设返回的是文本内容
        Papa.parse(content, {
          header: true,
          complete: (results) => {
            console.log('Parsed CSV:', results.data);
            data = results.data
            console.log('data',data);
          },
        });
      }
      const handleMICEFile = async (event) => {
        const response = await fetch('http://localhost:3000/fileMICE');
        if (!response.ok) {
          throw new Error('Failed to fetch file');
        }
        const content = await response.text(); // 假设返回的是文本内容
        Papa.parse(content, {
          header: true,
          complete: (results) => {
            console.log('Parsed CSV:', results.data);
            SVDData = results.data
            console.log('data',SVDData);
          },
        });
      }
      handleNormalFile()
      handleMICEFile()
    }
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setOpen(false);
  };
  return (
    <>
      <Tabs defaultActiveKey="1" centered size={'large'} tabBarGutter={400}>
        <Tabs.TabPane tab="数据管理" key="1">
          <Modal
            title="请选择插补方法"
            open={open}
            onOk={handleOk}
            confirmLoading={confirmLoading}
            onCancel={handleCancel}
          >
            <Radio.Group onChange={onChange} value={value}>
              <Space direction="vertical">
              <Radio value={1}>GAIN</Radio>
              <Radio value={2}>C-GAIN</Radio>
              <Radio value={3}>DDC-GAIN</Radio>
              <Radio value={4}>ACC-GAIN</Radio>
                <Radio value={5}>MICE</Radio>
              </Space>
            </Radio.Group>
            {/*<p>{modalText}</p>*/}
          </Modal>
          <ProTable<TableListItem1>
            columns={[
              {
                title: '序号',
                key: 'key',
                dataIndex: 'key',
                valueType: 'textarea',
              },
              {
                title: '编号',
                key: 'code',
                dataIndex: 'code',
                valueType: 'textarea',
              },
              {
                title: '插补',
                key: 'chabu',
                width: 120,
                valueType: 'option',
                render: () => [
                  <a key="a" onClick={showModal}>
                    插补
                  </a>,
                ],
              },
              {
                title: '上传者',
                key: 'uploader',
                dataIndex: 'uploader',
                valueType: 'textarea',
              },
              {
                title: '数据描述',
                key: 'description',
                dataIndex: 'description',
                valueType: 'textarea',
              },
              {
                title: '创建时间',
                key: 'createdAt',
                dataIndex: 'createdAt',
                valueType: 'dateTime',
              },
            ]}
            request={() => {
              return Promise.resolve({
                total: 200,
                data: tableListDataSource1,
                success: true,
              });
            }}
            rowKey="key"
            // headerTitle="数据管理"
            pagination={false}
            //
            search={{
              collapsed: false,
            }}
          />

          <h1>结果展示：</h1>
          <div className="outer">
            <div className="left">
              <Table columns={columns} dataSource={data} scroll={{ x: 1300 }}/>
            </div>
            <div className="right">
              <Table columns={columns} dataSource={SVDData} scroll={{ x: 1300 }}/>
            </div>
          </div>
        </Tabs.TabPane>

        <Tabs.TabPane tab="插补方法管理" key="2">
          <ProTable<TableListItem2>
            columns={[
              {
                title: '序号',
                key: 'key',
                dataIndex: 'key',
                valueType: 'textarea',
              },
              {
                title: '插补名称',
                key: 'name',
                dataIndex: 'name',
                valueType: 'textarea',
              },

              {
                title: '创建时间',
                key: 'createdAt',
                dataIndex: 'createdAt',
                valueType: 'dateTime',
              },
              {
                title: '操作',
                key: 'chabu',
                width: 120,
                valueType: 'option',
                render: (_, row, index, action) => [
                  <a
                    key="a"
                    onClick={() => {
                      console.log(row, index, action);
                    }}
                  >
                    修改
                  </a>,
                ],
              },
            ]}
            request={() => {
              return Promise.resolve({
                total: 200,
                data: tableListDataSource2,
                success: true,
              });
            }}
            rowKey="key"
            // headerTitle="数据管理"
            pagination={false}
            // toolbar={{
            //   actions: [
            //     <Button
            //       key="primary"
            //       type="primary"
            //       onClick={() => {
            //         alert('add');
            //       }}
            //     >
            //       添加数据
            //     </Button>,
            //   ],
            // }}
            search={{
              collapsed: false,
            }}
          />
        </Tabs.TabPane>
      </Tabs>
    </>
  );
};
